<script>
export default {
  name: "Information",
  data() {
    return {
      inputText: '', // 绑定输入框的内容
    };
  },
  computed: {
    // 计算属性，用于判断输入框是否有内容
    isInputEmpty() {
      return this.inputText.trim() === '';
    }
  }
}
</script>

<template>
  <div class="box">
    <div class="leftBox">
      <ul>
        <li>
          <i class="el-icon-close"></i>
          <img class="userImg" />
          <div class="uitop">
            <div class="uiname">用户名字</div>
            <div class="uidate">03-11</div>
          </div>
          <div class="uibot">最新消息</div>
        </li>
      </ul>
    </div>

    <div class="rightBox">
      <div class="rbTop">
        <div class="rbt_left">
          <img class="userImg" />
          <div class="rbt_uitop">用户名字</div>
          <div class="rbt_uibot">好友</div>
        </div>
        <div class="rbt_right">
        </div>
      </div>
      <!-- 信息展示区域 -->
      <!-- ioImg，ioinfo，isRead样式必须加上  ioleft是左侧信息要加的样式  ioright是右侧的  yseRead已读的  noRead未读的 -->
      <div class="infoShowBox">
        <div class="infoOne">
          <img class="ioImg ioleft">
          <div class="ioInfo ioleft">1234567890987问65432144423456765432q325436t4rsasfdbuesygrfeiyafkibewehcirw3yufehieyfvqo3cb9fyw98ygfc9bw8lyrg6vw8;4oayhtvciw45qreasfwth5tvesrtybse2345678909000000</div>
          <div class="isRead ioleft yesRead">已读</div>
        </div>
        <div class="infoOne">
          <img class="ioImg ioright">
          <div class="ioInfo ioright">1234567890000</div>
          <div class="isRead ioright yesRead">已读</div>
        </div>
        <div class="infoOne">
          <img class="ioImg ioleft">
          <div class="ioInfo ioleft">1234567890000</div>
          <div class="isRead ioleft yesRead">已读</div>
        </div>
        <div class="infoOne">
          <img class="ioImg ioleft">
          <!-- 图片路径 -->
          <img class="ioInfoImg ioleft" src="../../../static/vx.jpg">
          <div class="isRead ioleft yesRead">已读</div>
        </div>
        <div class="infoOne">
          <img class="ioImg ioright">
          <img class="ioInfoImg ioright" src="../../../static/vx.jpg">
          <div class="isRead ioright noRead">未读</div>
        </div>
      </div>
      <!-- 信息编辑区域 -->
      <div class="infoEditBox">
        <div class="function">
          <svg t="1741698769161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6235" width="200" height="200"><path d="M512 102.4c-225.8432 0-409.6 183.7568-409.6 409.6s183.7568 409.6 409.6 409.6 409.6-183.7568 409.6-409.6-183.7568-409.6-409.6-409.6m0-51.2a460.8 460.8 0 1 1 0 921.6 460.8 460.8 0 0 1 0-921.6z" fill="#A6A6A6" p-id="6236"></path><path d="M324.4032 406.8352m-50.176 0a50.176 50.176 0 1 0 100.352 0 50.176 50.176 0 1 0-100.352 0Z" fill="#A6A6A6" p-id="6237"></path><path d="M698.4192 406.8352m-50.176 0a50.176 50.176 0 1 0 100.352 0 50.176 50.176 0 1 0-100.352 0Z" fill="#A6A6A6" p-id="6238"></path><path d="M512.0512 794.3168a237.6704 237.6704 0 0 0 237.6192-237.7216h-475.3408a237.7216 237.7216 0 0 0 237.7216 237.7216z" fill="#A6A6A6" p-id="6239"></path></svg>
        </div>
        <input type="text" placeholder="请输入消息..." v-model="inputText" class="infoText">
        <input class="infoSend" type="button" value="发送" :disabled="isInputEmpty" :style="{ backgroundColor: isInputEmpty ? '#7DACFA' : '#0075EB', color: isInputEmpty ? 'rgba(255, 255, 255, 0.6)' : '#fff' }">
      </div>
    </div>

  </div>
</template>

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.box {
  background-color: #F0F3FA;
  width: 100%;
  height: 100%;
}

.leftBox {
  height: 650px;
  width: 210px;
  float: left;
  border-right: 1px #E7EBF1 solid;
}

.leftBox > ul {
  margin: 0;
  padding: 0;
  width: 210px;
  height: 100%;
  list-style: none;
  overflow-y: auto;
}

.leftBox > ul > li {
  width: 190px;  /*不能小于172*/
  margin-left: 10px;
  height: 50px;
  list-style: none;
  border-radius: 5px;
  position: relative; /* 添加相对定位 */
}

.leftBox > ul > li:hover {
  background-color: #DEE2E9;
}

.leftBox > ul > li:nth-child(1) {
  margin-top: 10px;
}

.el-icon-close {
  font-size: 12px; /* 调整字体大小 */
  width: 12px;
  height: 12px;
  position: absolute; /* 使用绝对定位 */
  top: 19px;
  color: #919191;
  display: none; /* 默认隐藏 */
}

.leftBox > ul > li:hover .el-icon-close {
  display: block; /* 悬停时显示 */
}

.leftBox .userImg {
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 5px;
  margin-left: 15px;
  margin-top: 10px;
  float: left;
}

.uitop{
  margin-left: 10px;
  width: 120px;
  height: 15px;
  float: left;
  margin-top: 10px;
}
.uibot{
  margin-left: 10px;
  width: 120px;
  height: 15px;
  float: left;
  font-size: 10px;
  line-height: 20px;
  color: #727272; /* 信息字体颜色 */
}
.uiname{
  width: 90px; /* 如果日期被顶下去，改这里的宽度，改小一点就行了 */
  height: 15px;
  line-height: 15px;
  color: #000;
  font-size: 14px;
  float: left;
}
.uidate{
  width: 30px;
  height: 15px;
  line-height: 15px;
  color: #9a9a9a;  /* 日期字体颜色 */
  font-size: 10px;
  float: left;
}



.rightBox {
  height: 650px;
  width: 1150px;
  float: left;
  margin-left: 10px;
}
.rbTop{
  width: 1150px;
  height: 50px;
  border-bottom: 1px #cecece solid;
}
.rbt_left{
  width: 500px;
  height: 50px;
  float: left;
}
.rbt_right{
  width: 200px;
  height: 50px;
  float: right;
}
.rbt_left .userImg{
  width: 30px;
  height: 30px;
  float: left;
  background-color: #42b983;
  border-radius: 5px;
  margin-top: 10px;
}
.rbt_uitop{
  margin-left: 40px;
  width: 400px;
  height: 15px;
  line-height: 15px;
  color: #000;
  font-size: 14px;
  margin-top: 10px;
}
.rbt_uibot{
  margin-left: 40px;
  width: 400px;
  height: 15px;
  font-size: 10px;
  line-height: 20px;
  color: #727272; /* 信息字体颜色 */
}
/* 信息展示 */
.infoShowBox{
  width: 1150px;
  height: 400px;
  overflow-y: auto;
}

.infoOne{
  width: 1140px;
  height: auto;
  overflow: hidden;
}
.ioImg{
  width: 30px;
  height: 30px;
  background-color: #42b983;
  border-radius: 5px;
  margin-top: 5px;
  float: left;
}
/* 信息的样式 */
.ioInfo{
  display: inline-block; /* 根据内容自动调整宽度 */
  max-width: 400px; /* 设置最大宽度 */
  height: auto; /* 高度自适应 */
  white-space: normal; /* 允许换行 */
  word-break: break-all; /* 强制所有字符换行 */
  word-wrap: break-word; /* 长单词或URL换行 */
  line-height: 30px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #fff;
  float: left;
  margin: 5px 10px 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: #000;
}

/* 图片的样式 */
.ioInfoImg{
  display: inline-block; /* 根据内容自动调整宽度 */
  max-width: 150px; /* 设置最大宽度 */
  height: auto; /* 高度自适应 */
  float: left;
  margin: 5px 10px 5px 10px;
  border-radius: 5px;
}

.isRead{
  width: 20px;
  height: 10px;
  text-align: center;
  line-height: 10px;
  font-size: 10px;
  clear: both;
  margin-right: 40px;
  margin-left: 40px;
}

/* 左侧信息 */
.ioleft{
  float: left;
}

/* 右侧信息 */
.ioright{
  float: right;
}

/* 已读字体颜色 */
.yesRead{
  color: #a8a8a8;
}

/* 未读字体颜色 */
.noRead{
  color: #0075EB;
}

/* 信息编辑 */
.infoEditBox{
  border-top: 1px #cecece solid;
  width: 1150px;
  height: 200px;
}
.function{
  width: 1150px;
  height: 20px;
  margin-top: 5px;
}
.infoText{
  width: 1150px;
  height: 135px;
  border: none;
  /* 移除边框、外阴影和内边距 */
  outline: none;
  box-shadow: none;

  /* 设置字体和颜色 */
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #F0F3FA;
  text-align: left;
  vertical-align: top;
}
.infoSend{
  border: none;
  padding: 0;
  width: 70px;
  height: 30px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  background-color: #7DACFA;
  float: right;
  margin-right: 10px;
}





/* 设置滚动条的整体样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条的宽度 */
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0); /* 轨道的背景颜色 */
  border-radius: 2px; /* 轨道的圆角 */
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #999CA2; /* 滑块的背景颜色 */
  border-radius: 2px; /* 滑块的圆角 */
}

.icon{
  width: 20px;
  height: 20px;
}
.addUser{
  margin-top: 15px;
}


</style>
